<template>
  <div class="home">
    <van-pull-refresh v-model="isPullDown" @refresh="onPullingDown">
      <home-header />
      <!-- 轮播 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="banner in banners" :key="banner.id">
          <img :src="banner.picUrl" alt="" />
        </van-swipe-item>
      </van-swipe>
      <!-- /轮播 -->
      <!-- 宫格导航 -->
      <van-grid column-num="3" clickable>
        <van-grid-item
          v-for="cate in cates"
          :key="cate.id"
          :icon="cate.icon"
          :text="cate.name"
          @click="enterLists(cate.id)"
        />
      </van-grid>
      <!-- /宫格导航 -->
      <!-- 推荐商品楼层 -->
      <van-list
        v-model="isLoading"
        :finished="isBottom"
        :offset="50"
        finished-text="我也是有底线的"
        :immediate-check="false"
        @load="reachBottom"
      >
        <items :items="items" @clickCartIcon="addCart" @clickItem="enterDetail"/>
      </van-list>
      <!-- /推荐商品楼层 -->
    </van-pull-refresh>
    <common-tab />
  </div>
</template>

<script>
import CommonTab from '../../components/CommonTab.vue'
import HomeHeader from './components/HomeHeader.vue'
import { fetchHomeBanner, fetchCates, fetchItems } from '@api'
import Items from './components/Items.vue'
import { mapActions } from 'vuex'
import { getToken } from '@utils'
export default {
  components: { CommonTab, HomeHeader, Items },
  data () {
    return {
      banners: [], // 首页banner
      cates: [], // 宫格导航分类数据
      items: [], // 首页推荐商品数据
      page: 1, // 请求第几页
      pageSize: 5, // 一页多少条
      isLoading: false, // 代表是否处理上拉触底的状态 默认值是false，当 load事件触发 自动变成true，反过来isLoading为true时，不会再触发 load事件了
      isBottom: false, // finished属性的isBottom代表是否已经加载完最后一页，放他变成true时，load事件就不再触发了，同时 列表最下面的文案变成finished-text的值
      isPullDown: false // 下拉刷新组件 是否处于下拉刷新的状态 在下拉后自动变成true,变成true 内容永远处理下拉状态，不会主动上去，在刷新成功后主动变成false结束这个状态
    }
  },
  created () {
    this.fetchBanner()
    this.fetchCates()
    this.fetchItems()
  },
  methods: {
    ...mapActions('cart', ['ADD_CART']),
    addCart (id) {
      // 加入购物车
      this.ADD_CART({
        goodsId: id,
        number: 1,
        token: getToken()
      })
    },
    enterLists (id) {
      // 进入商品列表
      this.$router.push({
        path: '/itemLists',
        query: {
          cateId: id
        }
      })
    },
    enterDetail (id) {
      // 进入详情
      this.$router.push(`/detail/${id}`)
    },
    onPullingDown () {
      // 下拉刷新
      // 重新请求列表数据
      /*
      当上拉加载遇到下拉刷新时，
      下拉刷新触发时，重置 请求参数 和上拉的状态
        page回到1
      */
      this.page = 1
      // 数据清空
      this.items = []
      // 上拉到达最后一页 变成false
      this.isBottom = false
      this.fetchItems()
    },
    reachBottom () {
      // 上拉触底事件
      /*
       请求下一页数据
        this.page++
      */
      this.page++
      this.fetchItems()
    },
    fetchItems () {
      // 请求精品推荐商品
      fetchItems({
        categoryId: 72399,
        page: this.page,
        pageSize: this.pageSize
      }).then((res) => {
        // 请求完成后，加载中状态结束
        this.isLoading = false
        // 改变下拉刷新状态
        this.isPullDown = false
        if (res.data.code === 700) {
          // 已经到达最后一页 没有数据了
          this.isBottom = true
        }
        if (res.data.code === 0) {
          // 要拼接
          this.items = [...this.items, ...res.data.data.result]
        }
      })
    },
    fetchCates () {
      // 请求导航分类数据
      fetchCates().then((res) => {
        if (res.data.code === 0) {
          this.cates = res.data.data
        }
      })
    },
    fetchBanner () {
      // 获取首页banner
      fetchHomeBanner().then((res) => {
        if (res.data.code === 0) {
          this.banners = res.data.data
        }
      })
    }
  },
  name: 'Home'
}
</script>

<style lang="scss" scoped>
.home {
  padding-bottom: 50px;
}
.my-swipe {
  width: 10rem;
  height: 5rem;
  img {
    width: 100%;
  }
}
</style>
